Skip to main content link. Accesskey S
  • Help
  • HCL Logo
  • HCL Notes and Domino Application Development wiki
  • THIS WIKI IS READ-ONLY. Individual names altered for privacy purposes.
  • HCL Forums and Blogs
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • API Documentation
Search
Community Articles > 日本語 - Japanese > FireBugによるデバッグ方法
  • Share Show Menu▼
  • Subscribe Show Menu▼

Recent articles by this author

XPages コントロールの紹介:「計算結果フィールド」コントロール

利用方法 計算結果フィールド 計算結果フィールド コントロールは、コアコントロールからドラッグ&ドロップすることで利用することができる。 {{11.gifコアコントロール} 設計要素 画面上では、以下の

XPages コントロールの紹介: 「ファイルのアップロード」と「ファイルのダウンロード」コアコントロール

利用方法 「ファイルのアップロード」と「ファイルのダウンロード」 「ファイルのアップロード」「ファイルのダウンロード」コントロールは、コアコントロールからドラッグ&ドロップすることで利用すること

XPages コントロールの紹介: 「タブ付パネルビュー」 コンテナコントロール

概要は提供されていません。

FireBugによるデバッグ方法

XPages アプリケーション開発を助けるデバッグの方法について解説します。

XPages - OpenNTF NamesPicker 解説

概要は提供されていません。
Community articleFireBugによるデバッグ方法
Added by ~James Chuwegen | Edited by ~James Chuwegen on December 20, 2010 | Version 13
  • Actions Show Menu▼
expanded Abstract
collapsed Abstract
XPages アプリケーション開発を助けるデバッグの方法について解説します。
Tags: XPages, Debug
ShowTable of Contents
HideTable of Contents
  • 1 クライアントスクリプトのデバッグ方法
    • 1.1 サンプルアプリケーションの作成
      • 1.1.1 XPage 「sample.xsp」 の作成
      • 1.1.2 Webブラウザで確認
    • 1.2 Firebug の動きを確認
      • 1.2.1 事前準備
      • 1.2.2 利用方法
  • 2 Firebug用のアドオンツール
  • 3 リンク集

クライアントスクリプトのデバッグ方法

サンプルアプリケーションの作成



XPage 「sample.xsp」 の作成

 
1) 「パネル」コントロールの配置
2) 「ボタン」コントロールの配置
 
名前: getNameBtn
ラベル:  名前取得
 
プロパティ
 
イベント: onClick()
 
イベント
①「onclick」をクリックする
②「クライアント」タブを選択する
③「アクションの追加」ボタンをクリックする

クライアントスクリプト
①以下のソースコードを記述する
②「OK」ボタンをクリックする
 
var uName1=window.document.getElementById("#{id:label1}").textContent;
var uName2=window.document.getElementById("#{id:label2}").textContent;
var uName3=window.document.getElementById("#{id:label3}").textContent;
var txt="1: "+uName1+" 2: "+uName2+" 3: "+uName3;
alert(txt);
 
3) 「ラベル」コントロールの配置
 
名前:label1
ラベル:山田 太郎
 
4) 「ラベル」コントロールの配置
 
名前:label2
ラベル:山田 次郎
 
5) 「ラベル」コントロールの配置
 
名前:label3
ラベル:山田 三郎

Webブラウザで確認

 
1) 以下の画面が表示されること

FireFox画面
 
2)  「名前取得」ボタンをクリックすると、メッセージボックスが表示されること
 
alert()
 

Firebug の動きを確認

事前準備



1) 「Firebug」アドオンが追加されているか、「マーク」を確認する

Firebug
 
2) 「Firebug」を起動する
 
起動画面
①Firebugのマークをクリックする
②Firebug画面が表示されることを確認する
 

利用方法


 
1) ブレーク ポイントを設定する
 
デバッグ画面
①JavaScriptを表示するために「スクリプト」タブをクリックする
②スクリプトが記載されている「sample.xsp」を選択する
③「1.1. 2)」で入力したコードが表示されていることを確認する
④ブレークポイントを設定したい行の左側をクリックする
⑤クリックした行に「●」が表示されることを確認する
 
2) 「名前取得」ボタンをクリックしてスクリプトを実行します。
 
デバッグ処理
①「名前取得」ボタンをクリックする
②ブレークポイントで処理が停止し、マークが表示されることを確認する
 
3) ステップ実行し、変数に値が設定されることを確認する
 
デバッグ画面
①ステップインをクリックする
②次の一行に処理が移動することを確認する
③「uName1」変数に値が設定されることを確認する

 

Firebug用のアドオンツール


No
アドオンツール概要備考
1
FireCookieCookieの内容を表示する
2
Inline Code FinderHTML内にインラインで埋め込まれたスタイルシートやイベント処理、JavaScriptを可視化する
3
FireRainbowJavaScriptをハイライティングする
4
CodeBurnerHTMLタグ(要素)のヘルプ機能を追加する
5
FireQueryJavaScriptフレームワークのスタンダード的な存在であるjQueryを利用しているWebアプリケーションのデバッグを支援する
6
FireFinderXPathを利用したHTMLタグの検索結果を表示する
7
YSlowWebサイトの表示速度を計測して問題点を表示する
8
FireScopeHTML,CSSのリファレンスを追加する
9
FirePaletteFirebugのCSSパネルにカラーピッカーを追加する
10
Pixel Perfect指定した画像をウェブページに重ねて表示する

リンク集



・「Firefox 3とFirebugで始めるJavaScript開発」
http://gihyo.jp/dev/feature/01/firebugexternal link

・「意外と知られていない機能が多い!?Firebugの使い方」
http://h2ham.seesaa.net/article/154387441.htmlexternal link

・「notes/domino liaison」ブログ
http://notesdominoliaison.blogspot.com/2009/12/xpages-http.htmlexternal link

・「Notesサポートのつぶやき」ブログ
http://hnagasim.blog8.fc2.com/?tag=xpagesexternal link

  • Actions Show Menu▼


expanded Attachments (12)
collapsed Attachments (12)
Edit the article to add or modify attachments.
File TypeSizeFile NameCreated OnDelete file
image/gif 3 KB 1.gif 12/20/10, 8:40 AM
image/gif 4 KB 2.gif 12/20/10, 8:40 AM
image/gif 8 KB 3.gif 12/20/10, 8:40 AM
image/gif 14 KB 4.gif 12/20/10, 8:41 AM
image/gif 19 KB 5.gif 12/20/10, 8:41 AM
image/gif 13 KB 6.gif 12/20/10, 8:41 AM
image/gif 4 KB 7.gif 12/20/10, 8:41 AM
image/gif 1 KB 8.gif 12/20/10, 8:41 AM
image/gif 35 KB 9.gif 12/20/10, 8:41 AM
image/gif 37 KB 10.gif 12/20/10, 8:41 AM
image/gif 41 KB 11.gif 12/20/10, 8:42 AM
image/gif 42 KB 12.gif 12/20/10, 8:42 AM
expanded Versions (13)
collapsed Versions (13)
Version Comparison     
VersionDateChanged by              Summary of changes
This version (13)Dec 20, 2010, 9:26:49 AM~James Chuwegen  
12Dec 20, 2010, 9:26:09 AM~Emile Cisnutheroopsi  
11Dec 20, 2010, 9:24:16 AM~Emile Cisnutheroopsi  
10Dec 20, 2010, 9:19:35 AM~Emile Cisnutheroopsi  
9Dec 20, 2010, 9:18:18 AM~Emile Cisnutheroopsi  
8Dec 20, 2010, 9:16:52 AM~Emile Cisnutheroopsi  
7Dec 20, 2010, 9:13:24 AM~Emile Cisnutheroopsi  
6Dec 20, 2010, 9:08:20 AM~Emile Cisnutheroopsi  
5Dec 20, 2010, 8:50:36 AM~Emile Cisnutheroopsi  
4Dec 20, 2010, 8:39:49 AM~Emile Cisnutheroopsi  
3Oct 29, 2010, 7:14:53 AM~Rebecca Minfreevitchobu  
2Oct 29, 2010, 6:55:40 AM~Rebecca Minfreevitchobu  
1Oct 29, 2010, 6:18:35 AM~Emile Cisnutheroopsi  
expanded Comments (0)
collapsed Comments (0)
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedAbout
  • HCL Software
  • HCL Digital Solutions community
  • HCL Software support
  • BlogsDigital Solutions blog
  • Community LinkHCL Software forums and blogs
  • About HCL
  • Privacy
  • Accessibility